<template>
    <div>
        <div class="regist">
            <van-nav-bar
                title="用户登录"
                left-text="返回"
                left-arrow
                @click-left="goBack"
            />
            <div class="regist-panel">
                <van-field
                    v-model="username"
                    label="用户名"
                    icon="clear"
                    placeholder="请输入用户名"
                    required
                    @click-icon="username=''"
                    :error-message="usernameError"
                />

                <van-field
                    type="password"
                    v-model="password"
                    label="密码"
                    placeholder="请输入密码"
                    required
                    :error-message="passwordError"
                />

            </div>

            <div class="regist-button">
                <van-button size="large" type="primary" @click="logintBtn" :loading="openLoading">登录</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import url from '@/serverApi.config.js'
    import { Toast } from 'vant'
    import { isEmpty } from '@/components/js/util/util.js'
    export default {
        data() {
            return {
                username: '',
                password:'',
                openLoading: false,
                usernameError:'',
                passwordError:''
            }
        },
        created () {
            if(localStorage.userInfo) {
                this.$router.push('/')
            }
        },
        methods: {
            goBack() {
                this.$router.go(-1)
            },
            logintBtn () {
                this.checkForm() && this.login()
            },
            login(){
                this.openLoading = true
                axios({
                    url: url.login,
                    method: 'post',
                    data: {
                        userName: this.username,
                        passWord: this.password
                    }
                }).then(response => {
                    if(response.data.code === 200 && response.data.message) {
                        new Promise((resolve, reject)=>{
                            localStorage.userInfo = JSON.stringify({username: this.username})
                            setTimeout(() => {
                                resolve()
                            }, 500)
                        }).then(() => {
                            Toast.success('登陆成功')
                            this.$router.push('/')
                        }).catch(err => {
                            Toast.fail('登陆失败')
                            console.log(err)
                        })
                    } else {
                        Toast.fail('登陆失败')
                        this.openLoading = false
                    }
                }).catch(err => {
                    Toast.fail('登录失败')
                    this.openLoading = false
                })
            },
            checkForm () {
                let isOk = true
                if (isEmpty(this.username) || this.username.length < 5) {
                    this.usernameError = '用户名不能小于5位'
                    isOk = false
                } else {
                    this.usernameError = ''
                }
                if (isEmpty(this.password) || this.password.length < 5) {
                    this.passwordError = '用户名不能小于5位'
                    isOk = false
                } else {
                    this.passwordError = ''
                }
                return isOk
            }
        },
    }
</script>

<style scoped>
     .regist-panel{
        width:96%;
        border-radius: 5px;
        margin:20px auto;
        padding-bottom:50px;
    }
    .regist-button{
        padding: 10px 1rem 20px;
        box-sizing: border-box;
    }
</style>